<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive Single Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            line-height: 1.6;
            background: #f9f9f9;
            color: #333;
        }
        header, section {
            padding: 2rem;
            background: white;
            margin: 1rem auto;
            max-width: 800px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        h2 {
            margin-top: 0;
        }
        label {
            display: block;
            margin-top: 1rem;
        }
        input, select, button {
            margin-top: 0.5rem;
            padding: 0.5rem;
            font-size: 1rem;
        }
        .result {
            margin-top: 1rem;
            font-weight: bold;
            color: #0066cc;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>

<header>
    <h1>Welcome to the Interactive Page</h1>
    <p>This page demonstrates various interactive elements embedded in text across multiple sections.</p>
</header>

<section>
    <h2>📋 User Information</h2>
    <p>Enter your name below and see it reflected instantly.</p>
    <label for="name">Your Name:</label>
    <input type="text" id="name" placeholder="Type here..." />
    <p class="result" id="nameOutput"></p>
</section>

<section>
    <h2>📊 Preferences</h2>
    <p>Select your favorite color from the dropdown. The background will update accordingly.</p>
    <label for="colorSelect">Favorite Color:</label>
    <select id="colorSelect">
        <option value="">-- Choose --</option>
        <option value="lightblue">Light Blue</option>
        <option value="lightgreen">Light Green</option>
        <option value="lightyellow">Light Yellow</option>
    </select>
</section>

<section>
    <h2>🧮 Quick Calculator</h2>
    <p>Try entering two numbers and click "Add".</p>
    <label>First Number:</label>
    <input type="number" id="num1" />
    <label>Second Number:</label>
    <input type="number" id="num2" />
    <button onclick="addNumbers()">Add</button>
    <p class="result" id="sumResult"></p>
</section>

<section>
    <h2>🎯 Dynamic Toggle</h2>
    <p>Click the toggle to reveal a hidden message.</p>
    <button onclick="toggleMessage()">Toggle Message</button>
    <p id="hiddenMessage" class="hidden">🎉 Surprise! You've discovered the hidden message.</p>
</section>

<section>
    <h2>✉️ Email Validation</h2>
    <p>Enter your email address and we'll validate it.</p>
    <label for="email">Email Address:</label>
    <input type="email" id="email" placeholder="Enter your email..." />
    <p class="result" id="emailResult"></p>
</section>

<section>
    <h2>🔒 Customer Story</h2>
    <p>Read a customer story about how they used our product and how it improved their workflow.</p>
    <p class="result">
        I've been using this product for months now and it has transformed my workflow. Before, I was spending hours manually organizing my files, but now I can do it in seconds. The interface is intuitive and easy to use, and
        it's really helpful for me.
        I'm so grateful for this product and I can't imagine my workflow without it.
        Thank you for making my life easier!

    </p>
    <p>
        <a href="https://www.example.com/customer-story">Read More</a>
    </p>
</section>

<section>
    <h2>✉️ Blogs</h2>
    <p>Check out our latest blog posts and stay updated with the latest industry news.</p>
    <p class="result">
        <a href="https://www.example.com/blog">Read More</a>
    </p>
    <p>
        <a href="https://www.example.com/blog">Read More</a>
    </p>
</section>

<section>
    <h2>🔒 Contact Us</h2>
    <p>If you have any questions or feedback, please feel free to contact us.</p>
    <label for="email2">Email Address:</label>
    <input type="email" id="email2" placeholder="Enter your email..." />
    <label for="message">Message:</label>
    <textarea id="message" rows="4" placeholder="Enter your message..."></textarea>
    <button onclick="alert('Message sent!')">Send</button>
    <p class="result">Thank you for contacting us. We'll get back to you soon.</p>
    <p class="result">
        <a href="https://www.example.com/contact-us">Contact Us</a>
    </p>
</section>

<script>
    document.getElementById('name').addEventListener('input', function () {
        const value = this.value.trim();
        document.getElementById('nameOutput').textContent = value ? `Hello, ${value}!` : '';
    });

    document.getElementById('colorSelect').addEventListener('change', function () {
        document.body.style.backgroundColor = this.value || '#f9f9f9';
    });

    function addNumbers() {
        const a = parseFloat(document.getElementById('num1').value);
        const b = parseFloat(document.getElementById('num2').value);
        const sum = (!isNaN(a) && !isNaN(b)) ? a + b : 'Please enter valid numbers';
        document.getElementById('sumResult').textContent = `Result: ${sum}`;
    }

    function toggleMessage() {
        const msg = document.getElementById('hiddenMessage');
        msg.classList.toggle('hidden');
    }
</script>

</body>
</html>
